<template>
	<view class="main">
		<tou_hand1 handtitle='绑定端口'></tou_hand1>
		<view class="show">
			<view class="stwo">
				<view class="twotap" v-for="(item, index) in list" :key="index">
					<view class="twotapshang">
						<view v-if="item.code">
							<view>设备号:{{item.code}}</view>
							<view>端口码:{{item.portCode}}</view>
						</view>
						<view v-if="!item.code">
							<view>端口号:{{item.ports}}</view>
							<view>{{item.txt}}</view>
						</view>
						<view class="twotapshangbtn" v-if="item.code" style="background-color: #4B98ED;" @click="addbtn(index)">修改</view>
						<view class="twotapshangbtn" v-if="!item.code" style="background-color: #4B98ED;" @click="addbtn(index)">绑定</view>
						<view class="twotapshangbtn" v-if="item.code" @click="delbtn(item.id)">删除</view>
					</view>
					<view class="twotapxia" v-if="item.createTime">
						<span style='margin-right: 20upx;'>端口号:{{item.ports}}</span>
						创建时间:{{item.createTime}}
					</view>
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand1/tou_hand1.vue'
	// import wx from "../../common/jweixin-module/index.js"
	// import {
	// 	Dialog
	// } from 'vant';
	export default {
		components: {tou_hand1},
		mounted() {
			
		},

		data() {
			return {
				list:[],
				deviceId:'',//16进制设备号
				portCode:'',//端口码
				posts:'',//端口号
				
			}
		},
		onShow() {
			
		},
		onLoad(options) {
			this.deviceId=options.deviceId
			this.show()
		},
		methods: {
			show(){
				this.list=[]
				var num=this.deviceId.substring(this.deviceId.length - 2, this.deviceId.length)
				var num1=0
				if(num=='05'){
					num1=10
				}else if(num=='06'){
					num1=16
				}else if(num=='07'){
					num1=12
				}
				for (let i = 0; i < num1; i++) {
				  var obj = {};
				  if(i<9){
					  obj.ports ='0'+Number(i+1);
				  }else{
					  obj.ports =Number(i+1);
				  }
				  obj.txt='当前端口暂未绑定'
				  
				  this.list.push(obj);
				}
				let data = {
					deviceId: this.deviceId,
				}
				this.$base.request1('manager/portCode/portList', 'GET', data)
				.then(res => {
					if (res.data.code == '0') {
						var arr=res.data.rows
						for(let i = 0; i < arr.length; i++){
							if(Number(arr[i].ports)<9){
								arr[i].ports ='0'+Number(Number(arr[i].ports)+1);
							}else{
								arr[i].ports =Number(Number(arr[i].ports)+1);
							}
							for(let j = 0; j < this.list.length; j++){
								if(arr[i].ports==this.list[j].ports){
									// this.list[j]=arr[i]
									this.$set(this.list,j,arr[i])
								}
							}
						}
					}else{
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: "error"
						});
						return
					}
				})
				.catch(err => {
						
				})
			},
			
			addbtn(port){
				
				let _this = this;
				uni.scanCode({
					scanType: ['qrCode'],
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						var str = res.result;
						var dk = str.split('/')
						console.log('端口号：', dk[4])
						
						if (dk[4].substr(-2, 2) == '00') {
							_this.jkbtn(dk[4],port);
						} else {
							uni.showToast({
								title: '请扫描正确二维码',
								duration: 2000,
								icon: "error"
							});
							return
						}
					}
				});
				
			},
			jkbtn(portDevice,port){
				var ports=''
				if(port<10){
					ports ='0'+port;
				}else{
					ports =port;
				}
				let data = {
					deviceId: this.deviceId,
					portDevice: portDevice,
					ports:ports
				}
				this.$base.request1('manager/portCode/add', 'POST', data)
				.then(res => {
					if (res.data.code == '200') {
						uni.showToast({
							title: '添加成功',
							duration: 2000,
						});
						this.show()
					}else{
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: "error"
						});
						return
					}
				})
				.catch(err => {
						
				})
			},
			delbtn(id){
				if(id){
					uni.showModal({
						title: '提示',
						content: '确认删除？',
						success: function (resModal) {
							if (resModal.confirm) {
								this.$base.request1('manager/portCode' + '/' + id, 'DELETE')
								.then(res => {
									if (res.data.code == '200') {
										uni.showToast({
											title: '删除成功',
											duration: 2000,
										});
										this.show()
									}else{
										uni.showToast({
											title: res.data.msg,
											duration: 2000,
											icon: "error"
										});
										return
									}
								})
								.catch(err => {
										
								})
							} else if (resModal.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
				}else{
					uni.showToast({
						title: '该数据暂无法删除',
						duration: 2000,
						icon: "error"
					});
					return
				}
				
			}
			
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;

		/deep/.van-list__finished-text {
			line-height: 500upx;
		}
		.show {
			width: 100%;
			box-sizing: border-box;
			padding-bottom: 30upx;
			.stwo{
				width: 650upx;
				box-sizing: border-box;
				margin: 30upx auto;
				
				.twotap{
					background-color: #fff;
					border-radius: 20upx;
					margin-bottom: 20upx;
					padding: 15upx 10upx;
					.twotapshang{
						font-size: 30upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #333333;
						box-sizing: border-box;
						padding: 10upx 20upx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.twotapshangbtn{
							width: 120upx;
							box-sizing: border-box;
							padding: 8upx 0;
							background-color: red;
							color: #fff;
							text-align: center;
							border-radius: 10upx;
							font-size: 28upx;
						}
					}
					.twotapxia{
						font-size: 26upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #686868;
						box-sizing: border-box;
						padding:0 20upx;
						padding-bottom: 10upx;
					}
				}
			}
			.three{
				width:650upx;
				margin: 0 auto;
				margin-bottom: 20upx;
				display: flex;
				justify-content: space-between;
				background-color: #fff;
				box-sizing: border-box;
				padding: 25upx 140upx;
				border-radius: 10upx;
				.threetap{
					width: 150upx;
					box-sizing: border-box;
					padding: 12upx 0;
					background-color: #4B98ED;
					color: #fff;
					text-align: center;
					border-radius: 10upx;
					font-size: 28upx;
				}
			}
			
		}

	}
</style>
